<template>
  <div class="box">
     <div class="head">新增用户</div>
       <div class="body"> 
        <!--  -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="账号:">
           <el-input  v-model="form.userId"></el-input>
          </el-form-item>
          <el-form-item label="密码:">
           <el-input v-model="form.psWord"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:">
           <el-input v-model="form.ispsWord"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
           <el-input v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
           <el-select v-model="form.gender" placeholder="请选择性别">
             <el-option label="男" value="男"></el-option>
             <el-option label="女" value="女"></el-option>
           </el-select>
          </el-form-item> 
          <el-form-item label="email:">
           <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号码:">
           <el-input v-model="form.phone"></el-input>
          </el-form-item>  
          <el-form-item label="身份:">
          <el-select v-model="form.ismaind" placeholder="请选择">
             <el-option label="用户" :value=0></el-option>
             <el-option label="管理员" :value=1></el-option>
           </el-select>
          </el-form-item>     
        </el-form>
        <!--  -->
       <div class="body_buttons">
          <el-button type="info" size="medium" @click="add_cancel">取消</el-button>
          <el-button type="primary" size="medium" @click="add_user">确认</el-button>
      </div>
     </div> 
  </div>
</template>
<script>
export default({
  data(){
    return {
      form:{
        userId: "",
        psWord: "",
        userName: "",
        gender: "",
        phone: "",
        ispsWord:"",
        email:"",
        ismaind:"",
      }
    }
  },
  methods:{
    add_user(){     
      // this.$message({
      //   message: '注册成功',
      //   type: 'success'
      // });
      this.axios.get('http://192.168.43.171:8081/users/insert', {
        params:{
                 userId:this.form.userId,
                 psWord:this.form.psWord,
                 ispsWord:this.form.ispsWord,
                 userName:this.form.userName,
                 gender:this.form.gender,
                 email:this.form.email,
                 phone:this.form.phone,
                 ismaind:this.form.ismaind
                }
         }).then((response)=> {
                    // console.log(typeof(this.form.ismaind));
                    // console.log(this.form.ismaind);
                    if (response.data.data) {
                      console.log(response.data);
                      this.$message({
                       message: '恭喜你,注册成功',
                       type: 'success'
                      });
                      
                    } else if(response.data.data==null) {
                      console.log(response.data);
                      this.$message({
                     message: response.data.msg,
                      type: 'warning'
                      });
                    }else{
                      this.$message({
                     message: response.data.msg,
                      type: 'warning'
                      });
                    }
                    // window.sessionStorage.setItem('token',response.data.phone)
                  }).catch(function (error) {
                    console.log(error);
                  });
      // 
    },
    add_cancel(){
      // alert(this.ismaind)
    }
  },
  beforeRouteEnter:(to,from,next)=>{
   const ismaind=sessionStorage.getItem("ismaind")
   console.log(ismaind);
    if (ismaind==1) {
      next()
    } else {
      alert("无权限")
    }
  }
})
</script>
<style lang="less" scoped>
.box{
  width: 100%;
  height: 100%;
  // background-color: rgba(247, 248, 243,0.95);
  background-color: #fff;
  // background-color:pink;
  .head{
      position: absolute;
      top: 0px;
      font-size: 22px;
      text-align: center;
      line-height: 38px;
      width: 100%;
      height: 40px;
      // background-color: rgba(247, 248, 243,0.95);
      background-color: #fff;
  }
  .body{
      width: 80%;
      height: 86%;
      // background-color: #4dc1d6;
      position: absolute;
      top: 57%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding-top: 40px;
      padding-right: 128px;
      padding-left: 128px;
      // background-color: rgba(247, 248, 243,0.95);
      background-color: #fff;
      .input_margin{
          margin-bottom: 32px;
      }
      .body_buttons{
          margin-left: 280px;
      }
  }
}

</style>